<template>
	<view class="farm">
		<view class="top df">
			<view class="vfor" v-for="(v,i) in tabList" :key="i" @click="tabChange(i)">
				<view class="name" :class="tabIndex == i ? 'active' : ''">{{v.name}}</view>
				<view class="line" v-if="tabIndex == i"></view>
			</view>
		</view>
		<view class="bottom">
			<view class="vfor" v-for="(v,i) in list" :key="i">
				<view class="title">{{v.landName}}</view>
				<view class="df detail">
					<view class="image">
						<image :src="v.picUrl" mode="" class="image"></image>
					</view>
					<view class="right">
						<view class="com df">
							<view class="tt">农事任务：</view>
							<view class="content">{{v.taskType}}</view>
						</view>
						<view class="com df">
							<view class="tt">认养时间：</view>
							<view class="content">{{v.fosterTime}}</view>
						</view>
						<view class="com df" v-if="tabIndex == 0">
							<view class="tt">品种：</view>
							<view class="content">{{v.variety}}</view>
						</view>
						<view class="btn" v-if="tabIndex == 0" @click="jump(v)">立即处理</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {findTaskByUserId} from "@/api/api.js"
	export default {
		data() {
			return {
				tabIndex: '0',
				tabList: [
					{
						name: '待处理'
					},
					{
						name: '已处理'
					},
				],
				list: [{
					title: '地块DJH',
					src: require('../../static/indexBg.png'),
					type:'整地',
					time: '2022-09-09 13:33:22',
					category: '苹果',
					child: [{
						name: '苹果',
						area: '10m²'
					}, {
						name: '苹果',
						area: '10m²'
					}, ]
				}]
			}
		},
		onShow(){
			this.getData()
		},
		methods: {
			async getData(){
				let query = `state=${this.tabIndex}&taskSource=订单任务`
				const res = await findTaskByUserId(query)
				if(res?.data.code == 200){
					this.list = res.data.data
				}else{
					uni.$u.toast(res.data.msg)
				}
			},
			tabChange(i) {
				this.tabIndex = i
				this.getData()
			},
			jump(v){
				uni.navigateTo({
					url:`/pages/operator/orderQRcode?id=${v.id}`
				})
			},
			navTo(url){
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.farm {
		.df {
			display: flex;
		}

		.top {
			width: 690rpx;
			height: 108rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.12);
			border-radius: 0rpx 0rpx 36rpx 36rpx;
			padding: 0 30rpx 30rpx;

			.vfor {
				width: 50%;
				.name {
					height: 88rpx;
					text-align: center;
					line-height: 88rpx;
					color: #1D1D1D;
					font-size: 30rpx;
					letter-spacing: 2rpx;
				}

				.active {
					color: #17CC77;
					font-size: 32rpx;
					font-weight: bold;
					background: #F4F6F9;
				}

				.line {
					margin: auto;
					margin-top: 10rpx;
					width: 290rpx;
					height: 6rpx;
					background: #17CC77;
					border-radius: 10rpx;
				}
			}
		}

		.bottom {
			padding: 20rpx 30rpx;

			.vfor {
				width: 650rpx;
				// height: 497rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(0, 0, 0, 0.04);
				padding: 35rpx 20rpx 20rpx;

				.title {
					font-size: 30rpx;
					color: #282828;
					margin-bottom: 42rpx;
					font-weight: bold;
				}

				.detail {
					padding-bottom: 20rpx;
					border-bottom: 1rpx solid rgba(0, 0, 0, 0.12);

					.image {
						width: 290rpx;
						height: 200rpx;
						border-radius: 20rpx;
						margin-right: 26rpx;
					}


					.right {
						padding-top: 23rpx;

						.btn {
							float: right;
							margin-top: 20rpx;
							width: 188rpx;
							height: 60rpx;
							background: #17CC77;
							border-radius: 8rpx;
							border: 2rpx solid #17CC77;
							text-align: center;
							line-height: 60rpx;
							color: #FFFFFF;
						}
					}
				}

				.areaDetail {
					.bb {
						border-bottom: 1rpx solid rgba(0, 0, 0, 0.12);
					}

					.detailVfor {
						padding-top: 20rpx;
						position: relative;

						.name {
							font-size: 30rpx;
							color: #282828;
							margin-bottom: 20rpx;
						}

						.button {
							position: absolute;
							right: 0;
							top: 35rpx;

							.btnCom {
								width: 184rpx;
								height: 56rpx;
								margin-left: 16rpx;
								background: rgba(23, 204, 119, 0.06);
								border-radius: 8rpx;
								border: 2rpx solid #17CC77;
								text-align: center;
								line-height: 56rpx;
								color: #17CC77;
								font-size: 28rpx;
								margin-right: 16rpx;
							}

							.btnSuccess {
								width: 188rpx;
								height: 60rpx;
								background: #17CC77;
								border-radius: 8rpx;
								// border: 2rpx solid #17CC77;
								text-align: center;
								line-height: 56rpx;
								color: #FFFFFF;
								font-size: 28rpx;
							}

							.btnMail {
								width: 338rpx;
								height: 56rpx;
								margin-left: 16rpx;
								background: rgba(23, 204, 119, 0.06);
								border-radius: 8rpx;
								border: 2rpx solid #17CC77;
								text-align: center;
								line-height: 56rpx;
								color: #17CC77;
								font-size: 28rpx;
								margin-right: 16rpx;
							}
						}
					}
				}

				.com {
					font-size: 26rpx;
					margin-bottom: 20rpx;

					.tt {
						color: rgba(68, 78, 104, 0.7);
						white-space: nowrap;
						width: 130rpx;
						text-align-last: justify;
					}

					.content {
						color: #1D1D1D;
						text-align: left;
					}
				}
			}
		}
	}
</style>